<template>
    <el-scrollbar height="100%" style="width: 100%;">
        <!-- 标题和搜索框 -->
        <div style="margin-top: 20px; margin-left: 40px; font-size: 2em; font-weight: bold; ">商品追踪
            <el-input v-model="toSearch" :prefix-icon="Search"
                style=" width: 15vw;min-width: 150px; margin-left: 30px; margin-right: 30px; float: right;" clearable />
        </div>

        <!-- 测试邮件发送功能 -->
        <el-button style="margin-left: 40px; margin-top: 20px" type="primary" @click="SendEmail">邮件发送功能测试</el-button>

        <!-- 追踪商品卡片显示区 -->
        <div style="display: flex;flex-wrap: wrap; justify-content: start;">
            <!-- 借书证卡片 -->
            <div class="cardBox" v-for="trace in traces" v-show="trace.product_name.includes(toSearch)" :key="trace.traceId">
                <div>
                    <!-- 卡片标题 -->
                    <div style="font-size: 25px; font-weight: bold;">No. {{ trace.traceId }}</div>

                    <el-divider />

                    <!-- 卡片内容 -->
                    <div style="margin-left: 10px; text-align: start; font-size: 15px;">
                        <p v-if="trace.platform === 0" style="padding: 2.5px;"><span style="font-weight: bold;">商品平台：</span>京东</p>
                        <p v-if="trace.platform === 1" style="padding: 2.5px;"><span style="font-weight: bold;">商品平台：</span>淘宝</p>
                        <p v-if="trace.platform === 2" style="padding: 2.5px;"><span style="font-weight: bold;">商品平台：</span>苏宁</p>
                        <p style="padding: 2.5px; font-size: 12px" class="titleShow" :title="trace.product_name"><span style="font-weight: bold; font-size: 15px">商品名称：</span>{{ trace.product_name }}</p>
                        <p style="padding: 2.5px;"><span style="font-weight: bold;">预期价格：</span>{{ trace.target_price }}</p>
                        <p style="padding: 2.5px; font-size: 12px"><span style="font-weight: bold; font-size: 15px">添加时间：</span>{{ trace.add_date }}</p>
                    </div>

                    <el-divider />

                    <!-- 卡片操作 -->
                    <div style="margin-top: 10px;">
                        <el-button type="primary" :icon="Edit"
                                   @click="this.toModifyInfo.traceId = trace.traceId; this.toModifyInfo.product_name = trace.product_name;
                                   this.toModifyInfo.target_price = trace.target_price; this.toModifyInfo.add_date = trace.add_date;
                                   this.toModifyInfo.platform = trace.platform; this.toModifyInfo.product_id = trace.product_id;
                                   modifyTraceVisible = true" circle />
                        <el-button type="danger" :icon="Delete"
                                   @click="this.toRemoveInfo.product_id = trace.product_id; this.toRemoveInfo.platform = trace.platform;
                                   this.toRemoveInfo.traceId = trace.traceId; removeTraceVisible = true"
                                   style="margin-left: 30px;" circle />
                    </div>

                </div>
            </div>
        </div>

        <!-- 修改追踪商品信息对话框 -->
        <el-dialog v-model="modifyTraceVisible" :title="'修改信息(追踪商品编号: ' + this.toModifyInfo.traceId + ')'" width="30%"
            align-center>
            <div style="margin-left: 2vw; font-weight: bold; font-size: 1rem; margin-top: 20px; ">
                平台：
              <span v-if="toModifyInfo.platform === 0" style="width: 12.5vw;"> 京东 </span>
              <span v-if="toModifyInfo.platform === 1" style="width: 12.5vw;"> 淘宝 </span>
              <span v-if="toModifyInfo.platform === 2" style="width: 12.5vw;"> 苏宁 </span>
            </div>
            <div style="margin-left: 2vw; font-weight: bold; font-size: 1rem; margin-top: 20px; ">
                商品名称：
                <span style="width: 12.5vw;"> {{toModifyInfo.product_name}} </span>
            </div>
            <div style="margin-left: 2vw; font-weight: bold; font-size: 1rem; margin-top: 20px; ">
                预期价格：
                <el-input v-model="toModifyInfo.target_price" style="width: 12.5vw;" clearable />
            </div>
            <div style="margin-left: 2vw; font-weight: bold; font-size: 1rem; margin-top: 20px; ">
                添加时间：
                <span style="width: 12.5vw;"> {{toModifyInfo.add_date}} </span>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="modifyTraceVisible=false">取消</el-button>
                    <el-button type="primary" @click="ConfirmModifyTrace"
                        :disabled="toModifyInfo.target_price <= 0">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 删除追踪商品对话框 -->
        <el-dialog v-model="removeTraceVisible" title="删除追踪商品" width="30%">
            <span>确定删除<span style="font-weight: bold;">{{ toRemoveInfo.traceId }}号追踪商品</span>吗？</span>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="removeTraceVisible=false">取消</el-button>
                    <el-button type="danger" @click="ConfirmRemoveTrace">
                        删除
                    </el-button>
                </span>
            </template>
        </el-dialog>

    </el-scrollbar>
</template>

<script>
import { Delete, Edit, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

function timestampToTime (timestamp) {
  timestamp = timestamp ? timestamp : null;
  let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let Y = date.getFullYear() + '-';
  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
  let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
}

export default {
    data() {
        return {
            traces: [{ // 追踪商品列表
              traceId: 1,
              platform: 0,
              product_name: '羽毛球',
              target_price: 100,
              product_id: "",
              product_url: "",
              add_date: "2024.10.09 21:48"
            }, {
              traceId: 2,
              platform: 1,
              product_name: '自行车',
              target_price: 300,
              product_id: "",
              product_url: "",
              add_date: "2024.10.10 7:45"
            }],
            Delete,
            Edit,
            Search,
            toSearch: '', // 搜索内容
            removeTraceVisible: false, // 删除追踪商品对话框可见性
            toRemoveInfo: { // 待删除的追踪商品信息
              traceId: 0,
              platform: 0,
              product_id: "",
            },
            modifyTraceVisible: false, // 修改信息对话框可见性
            toModifyInfo: { // 待修改追踪商品信息
              traceId: 0,
              platform: 0,
              product_name: "",
              target_price: 0,
              product_id: "",
              product_url: "",
              add_date: "",
            },
        }
    },
    methods: {
        ConfirmModifyTrace() {
            axios.post("/product/trace/modify/",
                {
                  platform: this.toModifyInfo.platform,
                  user_id: sessionStorage.getItem('user_id'),
                  product_id: this.toModifyInfo.product_id,
                  target_price: this.toModifyInfo.target_price,
                })
                .then(response => {
                    ElMessage.success("追踪商品修改成功")
                    this.QueryTraces()
                })
                .catch(error => {
                    ElMessage.error("追踪商品修改失败")
                    console.log(error)
                })
                .finally(() => {
                  this.modifyTraceVisible = false // 将对话框设置为不可见
                })
        },
        ConfirmRemoveTrace() {
            axios.post("/product/trace/delete/",
                {
                  platform: this.toRemoveInfo.platform,
                  user_id: sessionStorage.getItem('user_id'),
                  product_id: this.toRemoveInfo.product_id,
                })
                .then(response => {
                  ElMessage.success("追踪商品删除成功")
                  this.QueryTraces()
                })
                .catch(error => {
                  ElMessage.error("追踪商品删除失败")
                  console.log(error)
                })
                .finally(() => {
                  this.removeTraceVisible = false // 将删除对话框设置为不可见
                })
        },
        SendEmail() {
          axios.post('product/trace/email/', {
            user_id: sessionStorage.getItem('user_id'),
          })
          .then(response => {
            ElMessage.success("邮件发送成功")
          })
          .catch(err => {
            ElMessage.error("邮件发送失败")
            console.log(err)
          })
        },
        QueryTraces() {
            this.traces = [] // 清空列表
            axios.get('/product/trace/get/', {
              params: {
                user_id: sessionStorage.getItem('user_id'),
              }
            })
            .then(response => {
                this.traces = []
                let trace_product_list = response.data.trace_product_list
                trace_product_list.forEach((trace, index) => {
                    trace.traceId = index + 1
                    trace.add_date = timestampToTime(trace.add_date)
                    this.traces.push(trace)
                })
            })
            .catch(error => {
                console.log(error)
            })
        }
    },
    mounted() { // 当页面被渲染时
        this.QueryTraces() // 查询借书证
    }
}

</script>


<style scoped>
.cardBox {
    height: 350px;
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    margin-top: 40px;
    margin-left: 28px;
    margin-right: 10px;
    padding: 7px 10px 7px 7px;
}

.titleShow {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.newCardBox {
    height: 300px;
    width: 200px;
    margin-top: 40px;
    margin-left: 28px;
    margin-right: 10px;
    padding: 15px 10px 7px 7px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}
</style>